<template>
  <div style="min-height: 100%;" class="login-container">
    <div class="app-container" style="display: flex;justify-content: center ">
      <el-card class="box-card" style="width: 50%">
        <div slot="header" class="clearfix">
          <span>账号管理系统-重置密码</span>
        </div>
        <el-form ref="form">
          <el-form-item prop="新密码">
            <el-input
              :key="passwordType"
              ref="password"
              v-model="form.password"
              :type="passwordType"
              placeholder="新密码"
              name="password"
              tabindex="2"
              auto-complete="on"
              @keyup.enter.native="onSubmit"
            ><i slot="prefix" class="el-input__icon el-icon-lock"/></el-input>
          </el-form-item>
          <el-form-item prop="确认密码">
            <el-input
              :key="passwordType"
              ref="password"
              v-model="form.rePassword"
              :type="passwordType"
              placeholder="确认密码"
              name="password"
              tabindex="2"
              auto-complete="on"
              @keyup.enter.native="onSubmit"
            ><i slot="prefix" class="el-input__icon el-icon-lock"/></el-input>
          </el-form-item>
          <el-form-item>
            <div style="text-align: right">
              <el-button type="primary" @click="onSubmit">重置密码</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import {resetPassword} from '@/api/user'

export default {
  data() {
    return {
      passwordType: 'password',
      form: {
        password: '',
        rePassword: ''
      }
    }
  },
  methods: {
    onSubmit() {
      console.log(this.$route.params)
      if (this.form.password === this.form.rePassword) {
        resetPassword({password: this.form.password, key: this.$route.params.key})
          .then(res => {
            this.$message.success(res.result)
            setTimeout(_ => this.logout(), 2000)
          }).catch(err => {
          console.log(err)
        })
      }
    },
    async logout() {
      this.$router.push(`/login`)
    }
  }
}
</script>

<style scoped>
.login-container {
  width: 100%;
  background: url("https://w.wallhaven.cc/full/4o/wallhaven-4ogdo5.jpg") no-repeat 4px 5px;
  background-size: 100% 100%;
}
</style>

